import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';

import Echarts from '@kuiper-components/echarts';

import { percent } from '../../../../../../common/formatter';
import Progress from '../../../../../components/Progress';
import EmptyData from '../../../../../components/empty/EmptyData';
import EmptyPie from '../../../../../components/empty/EmptyPie';
import ChartTitle from '../../../../../components/ChartTitle';
import s from './CategoryStat.module.css';

const ROW_NAME_MAP = {
	certificate: '证书配置类型',
	protocol: '漏洞名称',
};

export default function CategoryStat({
	className,
	category,
	data,
	title,
	pieTitle,
	tableTitle,
}) {
	const palette = window.kuiper?.app?.palette || [];
	const initData = (data[category] || []).reduce((obj, item) => {
		obj[item.title] = obj[item.title] ? obj[item.title] + 1 : 1;
		return obj;
	}, {});

	const total = data[category]?.length || 0;
	const chartData = Object.entries(initData)
		.map(([name, value]) => ({
			name,
			value,
		}))
		.sort((a, b) => b.value - a.value);

	const option = {
		tooltip: {
			trigger: 'item',
			formatter({ name, percent, value }) {
				return `<div style="display:flex;padding:0.5rem">
										<div style="color: #2B2C32;padding-right: 0.25rem">${name}:</div>
										<div style="color: #2B2C32;padding-right: 0.25rem">${value}</div>
										<div style="color: #2B2C32">(${percent}%)</div>
									</div>`;
			},
			backgroundColor: '#fff',
			textStyle: {
				color: '#696969',
				fontSize: 12,
			},
		},
		legend: {
			show: false,
			orient: 'vertical',
			right: 10,
			top: 20,
			icon: 'circle',
		},
		series: [
			{
				center: ['50%', '50%'],
				name: 'SSL漏洞等级占比',
				type: 'pie',
				radius: [100, 132],
				avoidLabelOverlap: false,
				hoverOffset: 5,
				data: chartData,
				label: {
					show: true,
					position: 'center',
					formatter: [`{normal|${title}总数\n\n}`, `{highlight|${total}}`].join(
						''
					),
					color: '#696C78',
					fontWeight: 100,
					rich: {
						normal: {
							color: '#696C78',
							fontSize: 14,
						},
						highlight: {
							color: '#2B2C32',
							fontSize: 18,
						},
					},
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 14,
						formatter: [
							`{normal|${title}总数\n\n}`,
							`{highlight|${total}}`,
						].join(''),
						color: '#696C78',
						fontWeight: 100,
						rich: {
							normal: {
								color: '#696C78',
								fontSize: 14,
							},
							highlight: {
								color: '#2B2C32',
								fontSize: 18,
							},
						},
					},
				},
				labelLine: {
					show: false,
				},
			},
		],
	};

	return (
		<div className={cn(className, s.categoryStat)}>
			<div className={s.left}>
				<ChartTitle>{pieTitle}</ChartTitle>
				{chartData.length === 0 ? (
					<div className={s.chart}>
						<EmptyPie
							className={s.empty}
							textContent={
								<div className={s.emptyContent}>
									<div>{title}总数</div>
									<div className={s.num}>0</div>
								</div>
							}
						/>
					</div>
				) : (
					<Echarts option={option} className={s.chart} />
				)}
			</div>
			<div className={s.right}>
				<ChartTitle>{tableTitle}</ChartTitle>
				<div className={s.tableWapper}>
					<div className={s.tableContainer}>
						<table className={cn(s.table, 'tableFormat')}>
							<thead>
								<tr>
									<th>{ROW_NAME_MAP[category]}</th>
									<th>发现次数</th>
								</tr>
							</thead>
							<tbody>
								{chartData.map((item, idx) => (
									<tr key={item.name}>
										<td className={s.name}>
											<div className={s.name} title={item.name}>
												{item.name}
											</div>
										</td>
										<td>
											<div className={s.count}>
												<Progress
													className={s.progress}
													percent={percent(item.value / total)}
													fillColor={palette[idx]}
												/>
												<div className={s.value}>{item.value}</div>
											</div>
										</td>
									</tr>
								))}
							</tbody>
						</table>
						{chartData.length === 0 && (
							<EmptyData className={s.emptyData} borderless />
						)}
					</div>
				</div>
			</div>
		</div>
	);
}

CategoryStat.propTypes = {
	className: PropTypes.string,
	data: PropTypes.arrayOf(
		PropTypes.shape({
			id: PropTypes.string,
			title: PropTypes.string,
		})
	),
	category: PropTypes.string,
	title: PropTypes.string.isRequired,
	pieTitle: PropTypes.string.isRequired,
	tableTitle: PropTypes.string.isRequired,
};

CategoryStat.defaultProps = {
	className: s.categoryStat,
};
